<template>
	<view class="preHistory">
		<view class="preHistory_typeTime">
			<uni-forms-item label="类型" name="type">
				<uni-data-checkbox mode="button" v-model="changeType" :localdata="changeTypeList"
					@change="changeTypeData" />
			</uni-forms-item>
			<uni-forms-item label="时间" name="time">
				<uni-section>
					<uni-data-select v-model="value" :localdata="time" @change="changeTime"></uni-data-select>
				</uni-section>
				<view class="example-body">
					<picker mode="date" :value="date" @change="bindDateChange">
						<view class="uni-input">{{date}}</view>
					</picker>
					<text> ~ 至 ~ </text>
					<picker mode="date" fislds="month" :value="date" @change="bindDateChange">
						<view class="uni-input">{{date}}</view>
					</picker>
				</view>
			</uni-forms-item>
		</view>
		<view class="preHistory_echarts">
			<canvas id="echartsCanvas"></canvas>
		</view>
		<view class="preHistory_expend">
			<view class="preHistory_expend-title">
				<text> {{ expend }} 排行榜</text>
				<text>累至：0</text>
			</view>
		</view>
	</view>
</template>

<script lang="ts" setup>
	import moment from 'moment';
	import * as echarts from 'echarts';
	import { ref, reactive, computed, onMounted } from 'vue';

	const changeType = ref("expend");
	const expend = ref("支出");
	const changeTypeList = reactive([
		{
			text: '支出',
			value: 'expend',
		},
		{
			text: '收入',
			value: 'income',
		},
		{
			text: '总览',
			value: 'overview',
		}])
	const value = ref(0);
	const time = reactive([
		{
			value: 0,
			text: "按日"
		},
		{
			value: 1,
			text: "按月"
		},
		{
			value: 2,
			text: "按年"
		},
	])

	const date = moment().format('YYYY-MM-DD');

	const changeTypeData = (data : any) => {
		const { data: { text, value } } = data.detail;
		expend.value = text;
		console.log( data.detail, text, 11111);
	}
	const changeTime = (data : any) => {
		console.log(data, 11111);
	}

	const bindDateChange = (data : any) => {
		console.log(data, 11111);
	}

	onMounted(() => {
		var chartDom = document.getElementById('echartsCanvas')!;
		type EChartsOption = echarts.EChartsOption;
		const myChart = echarts.init(chartDom);
		let option : EChartsOption;
		option = {
			tooltip: {
				trigger: 'item'
			},
			legend: {
				show: false
			},
			series: [
				{
					// name: 'Access From',
					type: 'pie',
					radius: ['50%', '80%'],
					avoidLabelOverlap: true,
					itemStyle: {
						// borderRadius: 10,
						borderColor: '#fff',
						borderWidth: 2
					},
					label: {
						show: true,
						position: 'center'
					},
					emphasis: {
						label: {
							show: true,
							fontSize: 40,
							fontWeight: 'bold'
						}
					},
					labelLine: {
						show: false
					},
					data: [
						{ value: 1048, name: '支出' },
						{ value: 735, name: 'Direct' },
						{ value: 580, name: 'Email' },
						{ value: 484, name: 'Union Ads' },
						{ value: 300, name: 'Video Ads' }
					]
				}
			]
		};
		option && myChart.setOption(option);
	})
</script>

<style lang="scss" scoped>
	.preHistory {
		padding: 10px 10px 0;

		.preHistory_typeTime {
			font-size: 14px;
			background-color: #fff;
			border-radius: 5px;

			::v-deep .radio__inner,
			::v-deep .uni-section-header {
				display: none !important;
			}

			::v-deep .checklist-text {
				margin-left: 0 !important;
			}

			::v-deep .uni-data-checklist .checklist-group .checklist-box.is--button.is-checked {
				background-color: #6db07f;
				border-color: transparent;
			}

			::v-deep .uni-data-checklist .checklist-group .checklist-box.is--button {
				background-color: #ddd;
				border: none;
			}

			::v-deep .uni-data-checklist .checklist-group .checklist-box.is--button.is-checked .checklist-text {
				color: #fff;
			}

			::v-deep .uni-data-checklist .checklist-group .checklist-box .checklist-content .checklist-text {
				color: #000;
			}

			::v-deep .uni-forms-item__label {
				width: 40px !important;
				color: #000;
			}

			::v-deep .uni-forms-item {
				padding: 5px;
				margin-bottom: 5px;
				border-bottom: 1px solid #ddd;
			}

			::v-deep .uni-forms-item:last-child {
				border-bottom: none;
			}

			::v-deep .uni-forms-item__content {
				display: flex;
				align-items: center;
			}

			::v-deep .uni-select {
				height: 24px;
				background-color: #ddd;
			}

			::v-deep .uniui-clear:before {
				font-size: 18px;
			}

			.example-body {
				margin-left: 10px;
				display: flex;
				align-items: center;

				.uni-input {
					padding: 2px 4px;
					border: 1px solid #DDD;
					border-radius: 5px;
				}
			}
		}

		.preHistory_echarts {
			width: 100%;
			height: 200px;
			background-color: #fff;
			margin: 10px 0 20px;

			#echartsCanvas {
				width: 100%;
				height: 100%;

				div {
					width: 100%;
					height: 100%;
				}
			}
		}

		.preHistory_expend-title {
			display: flex;
			justify-content: space-between;
			align-items: center;
		}
	}
</style>